<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog-container">
      <h3>{{ dialogTitle }}</h3>

      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label>名称</label>
          <input v-model="formData.name" required>
        </div>

        <!-- 根据不同类型显示额外字段 -->
        <div v-if="type.includes('restaurant')" class="form-group">
          <label>描述</label>
          <textarea v-model="formData.description"></textarea>
        </div>

        <div v-if="type.includes('department')" class="form-group">
          <label>所属餐厅</label>
          <select v-model="formData.restaurantId" required>
            <option
                v-for="r in restaurants"
                :key="r.id"
                :value="r.id"
            >{{ r.name }}</option>
          </select>
        </div>

        <div class="dialog-actions">
          <button type="button" @click="$emit('close')">取消</button>
          <button type="submit">确认</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  type: String,
  data: Object,
  restaurants: Array
})

const emit = defineEmits(['submit', 'close'])

const formData = ref({ ...props.data })

const dialogTitle = computed(() => {
  const types = {
    'add-restaurant': '新建餐厅',
    'edit-restaurant': '编辑餐厅',
    'add-department': '新建部门',
    'edit-department': '编辑部门'
  }
  return types[props.type] || '系统对话框'
})

const handleSubmit = () => {
  emit('submit', formData.value)
}

watch(() => props.data, (newVal) => {
  formData.value = { ...newVal }
})
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-container {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  min-width: 400px;
}

.form-group {
  margin: 1rem 0;
  label {
    display: block;
    margin-bottom: 0.5rem;
  }
  input, textarea, select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
}

.dialog-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    &[type="button"] {
      background: #f0f0f0;
    }
    &[type="submit"] {
      background: #3b82f6;
      color: white;
    }
  }
}
</style>